<template>
  <div>
    <div class="i-box" style="--h: 3rem;">
      <XmolBox title="Xfunnel" style="--freeH: 100%">
        <div class="grid" style="--row: 1">
          <Xfunnel :seriesData="seriesData" class="p10" v-if="showChart" :legendSet="legendSet" :tooltip="tooltip" :seriesSet="seriesSet" :tooltipSet="{show: false}"></Xfunnel>
          <Xfunnel :seriesData="seriesData2" class="p10" v-if="showChart2" ></Xfunnel>
        </div>
      </XmolBox>
    </div>

    <section class="content mt10">
      <div>
        <p class="tt">代码示例</p>
        <div v-text='`<Xfunnel :seriesData="seriesData" class="p10" v-if="showChart" :legendSet="legendSet" :tooltip="tooltip" :seriesSet="seriesSet"></Xfunnel></Xfunnel>(金字塔)`'></div>
        <div v-text='`<Xfunnel :seriesData="seriesData2" class="p10" v-if="showChart2" ></Xfunnel>(倒三角)`'></div>
      </div>
      <div>
        <p class="tt">处理指标数据方法</p>
        <p><span class="td">方法名：</span> Common.dealPieData(data)</p>
        <p><span class="td">参数<el-tag size="mini" class="ml5" type="info">data</el-tag> ：</span>通用指标接口返回的data数据</p>
        <p><span class="td">返回数据：</span>[{name: '', value: ''}, …… ] （具体格式参考如下）</p>
        <pre style="font-size: 0.1rem" class="col-white2">
          参考：
          [
            { "name": "仔猪", "value": "2740.0" },
            { "name": "肥猪", "value": "4020.0" },
            { "name": "母猪存栏", "value": "4490.0" },
            { "name": "仔猪存栏", "value": "4120.0" },
            { "name": "肥猪存栏", "value": "4360.0" }
          ]
        </pre>
      </div>
      <div>
        <p class="tt">seriesData</p>
        <p><span class="td">数据参考：</span>{{seriesData}}</p>
      </div>
      <div>
        <p class="tt">legendSet(图例展示)</p>
        <p><span class="td">数据参考：</span>{{legendSet}}</p>
        <p class="col-white2">ps:默认不展示</p>
      </div>
      <div>
        <p class="tt">tooltip(显示描述)</p>
        <p><span class="td">数据参考：</span>{{tooltip}}</p>
      </div>
      <div>
        <p class="tt">seriesSet(样式参数)</p>
        <p><span class="td">数据参考：</span>{{seriesSet}}</p>
        <p class="col-white2">ps:默认倒三角</p>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 漏斗图
      seriesData: [
        { value: 10, name: 'Visit' },
        { value: 20, name: 'Click' },
        { value: 30, name: 'Show' }
      ],
      // 漏斗图2
      seriesData2: [
        { value: 10, name: 'Visit' },
        { value: 20, name: 'Click' },
        { value: 30, name: 'Show' }
      ],
      legendSet: {
        show: true,
        selectedMode: false
      },
      tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
      },
      seriesSet: {
        sort: 'ascending'
      },
      showChart: true,
      showChart2: true
    };
  },
  mounted () {
  },
  methods: {}
};
</script>
